<template>
  <div>
      <div id="D2black111" v-show="but">
    <div id="D2popup">
          <h3  class="D2hint">温馨提示</h3>
           <div class="D2typeface">1.话费充值后一般30分钟内到账;<br>
            2.今日属于充值高峰期，可能出现到账延迟或充值失败的情况，如需快速到账建议在运营商官方平台充值;<br>
            3.若充值失败，充值款将在48小时内原路退款，感谢您的谅解和使用!</div>
           <div class="D2close" id="D2close" @click="end"> 关闭</div>
     </div>
    </div>
    <div id="D2recharge01">
      <router-link to="All"><img id="D2recharge1" src="../assets/img/arrows.png" alt=""></router-link>
        <h4>手机充值</h4>
        <img id="D2recharge1" src="../assets/img/错号.png" alt="">
    </div>

    <div id="D2charge">
        <img id="D2recharge2" src="../assets/img/喇叭.png" alt="">
        <span>手机话费充值,享受随机立减！</span>
    </div>
    <div id="D2phone">
        <input id="D2phe" type="text" placeholder="12345678911" value=""  @blur="test()" :class="{'err-input' : phone.err}"
          v-model="phone.val" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11">
        <span id="alter" v-show="hintShow">{{hint}}</span>
        <img src="../assets/img/个人信息.png" alt="">
    </div>
    <div class="D2move">中国移动</div>
    <!-- 充话费 -->
    <div id="D2expenses">
        <span>充话费</span>&nbsp;&nbsp;&nbsp;
        <span id="D2auto">自动充值</span>
    </div>
    <div class="D2unit">
        <div id="D2money" @click="mone">
            <p class="D2money01">30元</p>
            <p id="D2money02">售价{{money1}}元</p>
        </div>
        <div id="D2money" @click="mone1">
            <p class="D2money01">50元</p>
            <p id="D2money03">售价{{money2}}元</p>
        </div>
        <div id="D2money" @click="mone2">
            <p class="D2money01">100元</p>
            <p id="D2money04">售价{{money3}}元</p>
        </div>
        <div id="D2money" @click="mone3">
            <p class="D2money01">200元</p>
            <p id="D2money05">售价{{money4}}元</p>
        </div>
        <div id="D2money" @click="mone4">
            <p class="D2money01">300元</p>
            <p id="D2money06">售价{{money5}}元</p>
        </div>
        <div id="D2money" @click="mone5">
            <p class="D2money01">500元</p>
            <p id="D2money07">售价{{money6}}元</p>
        </div>
    </div>
    <div id="D2immediately">
        <span id="D2immediately1" @click="skip"> 充值{{summ}}元 </span>
    </div>
       <!-- 温馨提示 -->
    <div class="D2end">
         <p class="D2end1">温馨提示</p>
         <p class="D2end1">1.本充值服务合作方暂不提供月结发票，如需增值税普通发票请联系圣科瑞客服，如对发票有特定要求的客户请谨慎充值。<br>
            2.手机充值正常30分钟内到账，月初、月末属于充值高峰时段，到账时间可能延迟，请您耐心等待。<br>
            3.本服务仅提醒客户有话费优惠券，是否可用请以实际支付时为准</p>
    </div>
  
      <div class="D2end2">
          <p class="D2end3">国内流量 | 常见问题 | 在线咨询 | 充值记录</p>
      </div>
  </div>
</template>

<script>
export default {
    data() {
    return {
      but: true,
      money1:"29.99",
      money2:"49.99",
      money3:"99.99",
      money4:"199.99",
      money5:"299.99",
      money6:"499.99",
      summ:"",
      hintShow:false,
      hint:"手机号码错误",
      phone: {
        val: '',
        err: false,
        pass: false,
      },
    };
  },
  methods: {
    end() {
      if (this.but == false) {
        this.but = true;
      } else {
        this.but = false;
      }
    },
    mone(){
      this.summ = this.money1
    },
    mone1(){
      this.summ = this.money2
    },
    mone2(){
      this.summ = this.money3
    },
    mone3(){
      this.summ = this.money4
    },
    mone4(){
      this.summ = this.money5
    },
    mone5(){
      this.summ = this.money6
    },
    // 跳转页面
    skip() {
    this.$router.push({
      name: "Recharge1",
      params: {
        mo:this.summ,
        phone:this.phone.val
      },
    });
  },
  // 手机号码验证
    test: function () {
      const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (this.phone.val == '' || this.phone.val.length <= 10 || !reg.test(this.phone.val)) {
        this.hintShow = true
        this.hint = '手机号码错误'
        this.err = true
        return false

      } else {
        this.hintShow = false
        this.hint = '手机号码正确'
        this.err = false
        return true
      }
    },
  },
}
</script>

<style scoped src="../assets/css/recharge.css">

</style>